<template>
  <div class="spgEntering">
      <div class="spgEnteringNavBar">
           <van-nav-bar title="录入招标信息" :border="false" left-arrow @click-left="goback"></van-nav-bar>
      </div>
      <div class="shoppingInfo" v-for="(spgentering,spg) in spgentering" :key="spg">
        <div class="shoppingInfoHand">
          <img :src="spgentering.images">
          <span class="title">{{spgentering.title}}</span>
          <van-button type="primary">重选商品</van-button>
        </div>
        <div class="shoppingInfoBut">
          <p class="topPrice">最高价:{{spgentering.topPrice}}</p>
          <p class="buttomPrice">最低价:{{spgentering.buttomPrice}}</p>
          <div id="main" style="width: 200px; height: 50px"></div>
        </div>
      </div>
      <div class="spgenteringForm">
          <van-form>
                <van-field
                    name="采购价格"
                    label="采购价格"
                    placeholder="请输入采购价格"
                    class="formitem"
                    :rules="[{ required: false, message: '请填写采购价格' }]"/>
                 <van-field
                    name="采购数量"
                    label="采购数量"
                    placeholder="请输入采购数量"
                    class="formitem"
                    :rules="[{ required: false, message: '请填写采购数量' }]"/>
                 <van-field
                    name="颜色"
                    label="颜色"
                    placeholder="红色"
                    class="formitem"
                    :rules="[{ required: false, message: '请填写鲜花颜色' }]"/>
                 <van-field
                    name="长度"
                    label="长度"
                    placeholder="请选择鲜花长度"
                    class="formitem"
                    :rules="[{ required: false, message: '请填写鲜花长度' }]"/>
                 <van-field
                    name="规格"
                    label="规格"
                    placeholder="20枝"
                    class="formitem"
                    :rules="[{ required: false, message: '请填写鲜花规格' }]"/>
          </van-form>
      </div>
      <div class="opening">
        <div class="openingHand">
          <span class="openingTitle">开放度</span>
          <span class="openingBody">温馨提示此项为单选哦</span>
        </div>
        <div class="openingBottom">
            <van-radio-group v-model="limit" direction="horizontal">
                <van-radio name="1" checked-color="#07c160">一度</van-radio>
                <van-radio name="2" checked-color="#07c160">二度</van-radio>
                <van-radio name="3" checked-color="#07c160">三度</van-radio>
                <van-radio name="4" checked-color="#07c160">四度</van-radio>
                <van-radio name="5" checked-color="#07c160">五度</van-radio>
            </van-radio-group>
        </div>
      </div>
            <div class="grade">
        <div class="gradeHand">
          <span class="gradeTitle">鲜花等级</span>
          <span class="gradeBody">温馨提示此项为单选哦</span>
        </div>
        <div class="gradeBottom">
            <van-radio-group v-model="grade" direction="horizontal">
                <van-radio name="A" checked-color="#07c160" class="gradeRadio">A</van-radio>
                <van-radio name="B" checked-color="#07c160" class="gradeRadio">B</van-radio>
                <van-radio name="C" checked-color="#07c160" class="gradeRadio">C</van-radio>
                <van-radio name="D" checked-color="#07c160" class="gradeRadio">D</van-radio>
                <van-radio name="E" checked-color="#07c160" class="gradeRadio">E</van-radio>
            </van-radio-group>
        </div>
      </div>
      <div class="timing">
        <van-datetime-picker
        type="datetime"
        v-model="currentDate"
        clickable
        name="timeout"
        :value="timeout"
        label="竞标结束时间"
        title="竞标结束时间"
        :min-date="minDate"
        :max-date="maxDate"
        placeholder="请选择结束时间"
        @click="showtimeout = true"
        class="timingitem"
        />
        <van-calendar v-model="showtimeout" @confirm="onConfirm" />
        <van-field
        readonly
        clickable
        name="deliver"
        :value="deliver"
        label="期望发货时间"
        placeholder="请选择发货时间"
        @click="showCalendar = true"
        class="timingitem"
        />
        <van-calendar v-model="showCalendar" @confirm="onDeliver" />
      </div>
      <div class="payment">
        <span class="total">合计{{total}}</span>
        <span class="handsel">支付定金{{handsel}}</span>
      </div>
  </div>
</template>

<script>
export default {
    name:"spgentering",
    data(){
        return{
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2021,0,1),
            currentDate:'',
            total:'￥88.88',
            handsel:'￥10.00',
            timeout:'',
            deliver:'',
            showtimeout: false,
            showCalendar: false,
            grade:'',
            limit:'',
            charts: '',
            opinionData: ["3", "19.1", "19.2", "19.3", "18","18.5","19.5","16", "20", "18.7", "18.6", "18.8","20.3","21.1"],
            spgentering:[
                {"images":require('../../assets/images/zwt.png'),"title":"满天星","topPrice":"￥21.1","buttomPrice":"￥3"}
                ]
        }
    },
    methods:{
        // 返回上一层
        goback(){
            this.$router.go(-1)
        },
        // 竞拍结束时间
        onConfirm(date) {
            this.timeout = `${date.getMonth() + 1}/${date.getDate()}`;
            this.showtimeout = false;
            },
        // 期望发货时间
        onDeliver(date) {
            this.deliver = `${date.getMonth() + 1}/${date.getDate()}`;
            this.showCalendar = false;
            },
        // 图表渲染
        drawLine(main) {
                this.charts = this.$echarts.init(document.getElementById('main'))
                color:this.color,
                this.charts.setOption({
                    title:{
                        show: true,
                    },
                    grid:{
                        show: false,
                        backgroundColor: 'transparent',
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        show : false,
                    },
                    yAxis: {
                        type: 'value',
                        show: false,
                    },
                    series: [{
                        type: 'line',
                        data: this.opinionData,
                        areaStyle:{
                             normal: {
                                color: {
                                    type: 'linear',
                                    colorStops: [{
                                    offset: 0, color: '#e6f9ef' 
                                    }, {
                                    offset: 1, color: '#4fd88b' 
                                    }],
                                }
                             }
                        },
                         itemStyle : {  
                                normal : {  
                                    color:'#00C657',  
                                    lineStyle:{  
                                        color:'#00C657'  
                                    }  
                                }  
                            },  
                    }]
                })
            }
    },
        mounted() {
            this.$nextTick(function() {
                this.drawLine('main')
            })
        },
}
</script>

<style scoped>
    .spgEntering{
        background:rgba(247,249,252,1);
    }
    .shoppingInfo{
        margin:13 23px;
        padding-top:10px;
        border-top: #f7f9fc 11px solid;
        background-color: #fff;
    }
    .shoppingInfoHand{
        display: flex;
    }
    .shoppingInfo img{
        width: 112px;
        height: 112px;
        vertical-align: middle;
        flex: 1;
        margin-left: 23px;
        display: inline-block;
    }
    .title{
        font-size:14px;
        font-weight:bold;
        color:rgba(51,51,51,1);
        margin-left: 12px;
        flex:1;
        display: inline-block;
        height: 14px;
    }
    .shoppingInfo button{
        flex: 1;
        margin-left: 20px;
        margin-right: 14px;
        width:50px;
        height:27px;
        border-radius: 3px;
    }
    .shoppingInfoBut{
        float: right;
        position: absolute;
        top:90px;
        margin-left: 140px;
    }
    .topPrice{
        font-size:10px;
        font-weight:500;
        color:rgba(0,198,87,1);
        margin-left: 10px;
    }
    .formitem{
        margin-top: 10px;
    }
    .buttomPrice{
        font-size:10px;
        font-weight:500;
        color:rgba(255,98,0,1);
        margin-left: 10px;
    }
    #main{

    }
    .spgenteringForm{
        margin-top: 20px;
    }
    .opening{
        background-color: #fff;
    }
    .openingHand{
        margin-top: 30px;
    }
    .openingTitle{
        font-size:14px;
        font-weight:500;
        color:rgba(51,51,51,1);
        margin-left:20px;
        line-height: 10px;
    }
    .openingBody{
        font-size:14px;
        font-weight:500;
        color:rgba(169,174,192,1);
        margin-left:134px;
        line-height: 10px;
    }
    .openingBottom{
        margin-top: 37px;
        margin-left:12px;
    }
    .grade{
        background-color: #fff;
    }
    .gradeHand{
        margin-top: 30px;
    }
    .gradeTitle{
        font-size:14px;
        font-weight:500;
        color:rgba(51,51,51,1);
        margin-left:10px;
    }
    .gradeBody{
        font-size:14px;
        font-weight:500;
        color:rgba(169,174,192,1);
        margin-left:134px;
    }
    .gradeBottom{
        margin-top: 37px;
    }
    .gradeRadio{
        margin-left:20px;
    }
    .timing{
        margin-top:26px;
    }
    .timingitem {
        margin-top: 5px;
    }
    .payment{
        width:100%;
        margin-top: 11px;
        display: flex;
    }
    .van-ellipsis van-picker__title{
        color:#A9AEC0;
    }
    .van-picker-column__item van-picker-column__item--selected{
        height: 30px;
    }
    .total{
        flex:1;
        height:30px;
        background:rgba(255,255,255,1);
        font-size:18px;
        font-weight:bold;
        color:rgba(255,98,0,1);
        line-height:20px;
        padding:10px;
        text-align: center;
        align-items: center;
        line-height: 18px;
        justify-content: center;
    }
    .handsel{
        flex:1;
        height:30px;
        background:rgba(3,199,112,1);
        font-size:18px;
        font-weight:bold;
        color:#fff;
        line-height:20px;
        padding:10px;
        text-align: center;
        align-items: center;
        line-height: 18px;
        justify-content: center;
    }
</style>